<template>
  <dv-border-box-10 :color="['#2ACBD8', '#2ACBD8']">
    <div id="main">
      <div class="title">实时数据</div>
      <div class="my-table">
        <dv-loading v-show="configData.length === 0">Loading...</dv-loading>
        <dv-scroll-board
          v-show="configData.length !== 0"
          :config="configHandle"
          class="scroll-board"
          @click="handleRow"
        />
      </div>
    </div>
  </dv-border-box-10>
</template>

<script>
import { drop } from 'lodash'

export default {
  name: 'RealtimeChart',
  props: {
    configData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  computed: {
    configHandle () {
      return {
        header: [
          '<span style="color: #4675C2">站点</span>',
          '<span style="color: #4675C2">车牌号</span>',
          '<span style="color: #4675C2">总质量</span>',
          '<span style="color: #4675C2">超重</span>',
          '<span style="color: #4675C2">检测时间</span>'
        ],
        hoverPause: true,
        rowNum: 9,
        headerBGC: '#172257',
        oddRowBGC: '#020420',
        evenRowBGC: '#172257',
        headerHeight: 28,
        waitTime: 4000,
        align: ['center', 'center', 'center', 'center', 'center'],
        columnWidth: [110, 110, 110, 60],
        data: this.configData.map((item1) => {
          if (item1[4] === '是') {
            return drop(item1).map((item2) => {
              return `<span style="color: #F56C6C">${item2}</span>`
            })
          } else {
            // id数据drop
            return drop(item1).map((item2) => {
              return `<span style="color: #B1B3BE">${item2}</span>`
            })
          }
        })
      }
    }
  },
  methods: {
    handleRow ({ rowIndex }) {
      this.$emit('click-row', this.configData[rowIndex])
    }
  }
}
</script>

<style lang="less" scoped>
#main {
  padding: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;

  .title {
    margin-bottom: 5px;
  }

  .my-table {
    overflow: hidden;

    .scroll-board, .dv-loading {
      width: 100%;
      height: 270px;
    }
  }

  .dv-loading {
  }
}

::v-deep .rows {
  cursor: pointer;
}
</style>
